<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义进度条样式 */
    .percent input[type=range] {
      -webkit-appearance: none;
      /*清除系统默认样式*/
      width: 7.8rem;
      /* background: -webkit-linear-gradient(#ddd, #ddd) no-repeat, #ddd; */
      /*设置左边颜色为#61bd12，右边颜色为#ddd*/
      background-size: 75% 100%;
      /*设置左右宽度比例*/
      height: 0.6rem;
      /*横条的高度*/
      border-radius: 0.4rem;
      border: 1px solid #ddd;
      box-shadow: 0 0 10px rgba(0,0,0,.125) inset ;
    }

    /*拖动块的样式*/
    .percent input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      /*清除系统默认样式*/
      height: .9rem;
      /*拖动块高度*/
      width: .9rem;
      /*拖动块宽度*/
      background: #fff;
      /*拖动块背景*/
      border-radius: 50%;
      /*外观设置为圆形*/
      border: solid 1px #ddd;
      /*设置边框*/
    }

    a {
      height: 300px;
    }

  </style>
</head>
<body>
<a href="./index.html">返回首页</a>
<h1>文件上传</h1>
<form id="upload-form" enctype="multipart/form-data">
  <input id="uploadFile" type="file" name="file"/>
  <input id="uploadSubmitBtn" type="button" value="提交"/>
  <div>
    <a id="uploadFileHref" href="" target="_self">文件地址</a>
  </div>
</form>
<h1>大文件分片上传</h1>
<form id="slice-upload-form" enctype="multipart/form-data">
  <input id="sliceUploadFile" type="file" name="file"/>
  <input id="sliceUploadSubmitBtn" type="button" value="提交"/>
  <div class="percent">
    <input id="percentRange" type="range" value="0"/><span id="percentSpan">0%</span>
  </div>
  <div>
    <a id="sliceUploadFileHref" href="" target="_self">文件地址</a>
  </div>
</form>
<footer class="text-center panel-footer" role="contentinfo">
  <div class="container">
    <p class="">Designed by <a href="https://github.com/kyyee" target="_blank">@kyyee</a> with <a
      href="https://github.com/twbs/bootstrap" target="_blank">Bootstrap</a></p>
  </div>
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.2/spark-md5.js"></script>
<script src="file.js" type="module"></script>
</html>
